<script setup>
import layoutSlot from '@/components/layoutSlot.vue';
import outLine from '@/components/outLine.vue'
import { userGetUserInfoService, userUpdateUserInfo } from '@/api/user.js'
import { ref } from 'vue'
import { useUserStore } from '@/stores'
const userStore  = useUserStore()

// 表单数据
const userForm = ref()

// 表单数据
const userInfo = ref({
    id: '',
    username: '',
    nickname: '',
    email: ''
})
// 表单验证规则
const rules = {
    nickname: [
        { required: true, message: '昵称不能为空', trigger: 'blur' },
        { pattern: /^.{2,14}$/, message: '请输入3-14位的非空字符', trigger: 'blur' }
    ],
    email: [
        { required: true, message: '邮箱不能为空', trigger: 'blur' },
        { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式错误', trigger: 'blur'}
    ]
}

// 获取用户基本信息
const getUserInfo = async() => {
    const { data } = await userGetUserInfoService()
    userInfo.value = data.data
}

// 提交修改
const submitBtn = async() => {
    await userForm.value.validate()
    const { data } = await userUpdateUserInfo(userInfo.value)
    if (data.status === 0) {
        getUserInfo()
        userStore.setUserInfo(userInfo.value)
        ElMessage.success(data.message)
    } else {
        ElMessage.error(data.message)
    }
}

getUserInfo()

</script>

<template>
    <layoutSlot style="background-color: #fff;">
        <template #title>基本资料</template>
        <template #main>
            <outLine></outLine>
            <el-form ref="userForm" :model="userInfo" :rules="rules" label-position="right" label-width="80px" style="max-width: 500px;">
                <el-form-item label="学号/工号" prop="id">
                    <el-input v-model="userInfo.id" disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="登录名称" prop="username">
                    <el-input v-model="userInfo.username" disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="用户昵称" prop="nickname">
                    <el-input v-model="userInfo.nickname"></el-input>
                </el-form-item>
                <el-form-item label="用户邮箱" prop="email">
                    <el-input v-model="userInfo.email"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitBtn">提交修改</el-button>
                </el-form-item>
            </el-form>
           
        </template>
    </layoutSlot>
</template>